<template>
	<div>
		<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :data="upload.data" :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
			<i class="el-icon-upload"></i>
			<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			<div class="el-upload__tip text-center" slot="tip">
				<!-- <div class="el-upload__tip" slot="tip">
					<el-checkbox v-model="upload.data.updateSupport" />
					是否更新已经存在的数据
				</div> -->
				<span>仅允许导入xls、xlsx格式文件。</span>
				<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
			</div>
		</el-upload>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="submitFileForm">确 定</el-button>
			<el-button @click="cancel">取 消</el-button>
		</div>
	</div>
</template>
<script>
import { getToken } from "@/utils/auth"
export default {
	name: "importTemplete",
	props: ["downLoadTemplete", "importUrl", "selectData"],
	data() {
		return {
			// 导入参数
			upload: {
				// 携带参数  // 是否更新已经存在的数据
				data: { dataIds: [], updateSupport: 1 },
				// 是否显示弹出层（导入）
				open: false,
				// 弹出层标题（导入）
				title: "",
				// 是否禁用上传
				isUploading: false,
				// 设置上传的请求头部
				headers: { Authorization: "Bearer " + getToken() },
				// 上传的地址
				url: process.env.VUE_APP_BASE_API + ""
			}
		}
	},
	watch: {
		importUrl: {
			handler(newVal) {
				this.upload.data.dataIds = this.selectData && this.selectData.length > 0 ? this.selectData : []
				this.upload.url = process.env.VUE_APP_BASE_API + `${newVal}`
			},
			deep: true,
			immediate: true
		}
	},
	created() {},
	methods: {
		/** 下载模板操作 */
		importTemplate() {
			this.download(this.downLoadTemplete.url, {}, `${this.downLoadTemplete.title}_${new Date().getTime()}.xlsx`)
		},
		// 文件上传中处理
		handleFileUploadProgress(event, file, fileList) {
			this.upload.isUploading = true
		},
		// 文件上传成功处理
		handleFileSuccess(response, file, fileList) {
			this.upload.open = false
			this.upload.isUploading = false
			this.$refs.upload.clearFiles()
			this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
			this.$emit("closeOpen", response.code == 500 ? false : true)
		},
		cancel() {
			this.$emit("closeOpen", false)
		},
		// 提交上传文件
		submitFileForm() {
			this.$refs.upload.submit()
		}
	}
}
</script>
<style scoped>
.dialog-footer {
	margin-top: 20px;
	text-align: right;
}
</style>
